<template>
	<view class="otherGarden-cell-view">
		<view class="otherGarden-cell-top-view">
			<view class="otherGarden-cell-top-detail-view">
				<view class="cell-avatar-view">
					<u-avatar size="60" :src="$u.http.config.baseUrl + '/api/file/Image/userAvatar/'+icon"></u-avatar>
					<view v-if="value1 > value2">
						<u-image class="cell-image-view" src="/static/img/loveforest/crown.png" width="38rpx" height="38rpx" mode="scaleToFill"></u-image>
					</view>
				</view>
				{{title1}}
			</view>
			<view class="otherGarden-cell-top-detail-view">
				<view class="cell-avatar-view">
					<u-avatar size="60" :src="$u.http.config.baseUrl + '/api/file/Image/userAvatar/'+icon1"></u-avatar>
					<view v-if="value2 > value1">
						<u-image class="cell-image-view" src="/static/img/loveforest/crown.png" width="38rpx" height="38rpx" mode="scaleToFill"></u-image>
					</view>
				</view>
				{{title2}}
			</view>
		</view>
		<view class="otherGarden-cell-bottom-view">
			<view class="otherGarden-cell-bottom-left-view" :style="{'width': `${leftWidth||15}%`}">
				{{value1}}g
				<u-image class="otherGarden-cell-bottom-left-image-view" src="/static/img/loveforest/vs.png" width="70rpx" height="70rpx" mode="scaleToFill"></u-image>
			</view>
			<view class="otherGarden-cell-bottom-right-view">
				{{value2}}g
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title1: {
				type: String,
				default: ''
			},
			value1: {
				type: Number,
				default: 0
			},
			title2: {
				type: String,
				default: ''
			},
			value2: {
				type: Number,
				default: 0
			},
			icon: {
				type: String,
				default:""
			},
			icon1: {
				type: String,
				default:""
			}
		},
		computed: {
			leftWidth() {
				if(this.value1 == this.value2&&this.value1===0) {
					return 50
				}
				return this.value1 / (this.value1 + this.value2) * 100
			}
		}
	}
</script>

<style lang="scss">
	.otherGarden-cell-view {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		.otherGarden-cell-top-view {
			display: flex;
			justify-content: space-between;
			
			.otherGarden-cell-top-detail-view {
				color: #666666;
				display: flex;
				align-items: center;
				
				.cell-avatar-view {
					position: relative;
					width: 60rpx;
					height: 60rpx;
					margin-right: 18rpx;
					
					.cell-image-view {
						position: absolute;
						top: -18rpx;
						right: -18rpx;
					}
				}
			}
		}
		
		.otherGarden-cell-bottom-view {
			height: 50rpx;
			margin-top: 20rpx;
			display: flex;
			
			.otherGarden-cell-bottom-left-view {
				height: 100%;
				border-radius: 25rpx 0rpx 0rpx 25rpx;
				background-image: linear-gradient(to right, #FFA6A1, #FF6F67);
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: #FFFFFF;
				font-weight: bold;
				font-size: 30rpx;
				padding-left: 10rpx;
				position: relative;
				
				.otherGarden-cell-bottom-left-image-view {
					position: absolute;
					top: -13rpx;
					right: -35rpx;
				}
			}
			
			.otherGarden-cell-bottom-right-view {
				flex: 1;
				min-width: 15%;
				height: 100%;
				border-radius: 0rpx 25rpx 25rpx 0rpx;
				background-image: linear-gradient(to right, #7599FF, #5985FF);
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #FFFFFF;
				font-weight: bold;
				font-size: 30rpx;
				padding-right: 10rpx;
			}
		}
	}
</style>
